<template>
  <el-container class="app-container">
    <el-header
      class="header-container"
      height="auto"
    >
      <el-row>
        <el-col :span="12">
          <el-link
            :underline="false"
            style="font-size: 1.5rem;"
          >
            Uomg APi
          </el-link>
        </el-col>
        <el-col
          class="menu-list"
          :span="12"
        >
          <el-link
            :underline="false"
            href="#"
          >
            赞助
          </el-link>
          <el-link
            :underline="false"
            href="#"
          >
            博客
          </el-link>
          <el-link
            :underline="false"
            href="#about"
          >
            关于
          </el-link>
        </el-col>
      </el-row>
      <div style="text-align: center;">
        <h1 class="site-title">
          UomgAPI
        </h1>
        <p class="site-description">
          稳定、快速、免费的 API 接口服务<br>
          <span class="package-amount">共收录了 <strong>51</strong> 个接口项目</span>
        </p>
        <el-input
          v-model="keywors"
          class="search-input"
          suffix-icon="el-icon-search"
          placeholder="搜索API名称，例如：短网址"
          @keyup.enter.native="getAPIList"
        />
      </div>
    </el-header>
    <el-main class="main-container">
      <el-button
        type="primary"
        @click="addAPI"
      >
        新增
      </el-button>
      <el-table
        class="api-table"
        :show-header="false"
        :data="listData"
        style="width: 100%"
        @row-click="rowClick"
      >
        <el-table-column
          class-name="column-name"
          prop="name"
          width="400"
        />
        <el-table-column>
          <template slot-scope="{ row }">
            <div class="desc-header">
              {{ row.description }}
            </div>
            <div class="desc-footer">
              <i class="el-icon-star-off" /> {{ row.star }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer
      id="about"
      class="footer-container"
      height="auto"
    >
      <div style="display:flex;align-items: flex-start;justify-content: space-between;padding: 4rem 0;padding-left: 200px;padding-right: 200px;">
        <div style="width:430px">
          <div class="footer-title">
            关于 UomgAPI
          </div>
          <div class="footer-top-left">
            UomgAPI 是 优启梦 支持并维护的 API 接口项目，致力于为用户提供稳定、快速的免费 API 接口服务平台。
          </div>
          <div class="footer-top-left">
            自2018年08月26日上线以来已经提供数 1,831,505 次 API 接口服务。
          </div>
          <div class="footer-top-left">
            反馈或建议请发送邮件至：lw@aeink.com
          </div>
        </div>
        <div style="width:250px">
          <div class="footer-title">
            友情链接
          </div>
          <div>
            <el-link :underline="false">
              优启梦防洪
            </el-link>
            <el-link
              :underline="false"
              style="margin-left:0.5rem"
            >
              AE博客
            </el-link>
            <el-link
              :underline="false"
              style="margin-left:0.5rem"
            >
              三合一收款码
            </el-link>
            <el-link :underline="false">
              微信域名检测
            </el-link>
          </div>
        </div>
        <div style="width:160px">
          <div class="footer-title">
            友情链接
          </div>
          <a
            href="https://console.upyun.com/register/?invite=ByTbEMrV-"
            style="border-bottom: none;"
            target="_blank"
            onclick="_hmt.push(['_trackEvent', 'footer', 'click', 'footer-upyun'])"
            rel="nofollow"
          >
            <img
              src="@/assets/images/upyun.svg"
              alt="又拍云"
              style="width: 145px; "
            >
          </a>
          <a
            href="https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=0g485asj"
            style="border-bottom: none;"
            target="_blank"
            onclick="_hmt.push(['_trackEvent', 'footer', 'click', 'footer-aliyun'])"
            rel="nofollow"
          >
            <img
              src="@/assets/images/aliyun.svg"
              alt="阿里云"
              style="width: 145px;"
            >
          </a>
        </div>
        <div style="width:160px">
          <div class="footer-title">
            赞助我们
          </div>
          <img
            src="@/assets/images/aknife.png"
            alt=""
            style="width: 145px;"
          >
        </div>
      </div>
      <div style="text-align:center; background-color: rgba(51,51,51,.08);padding: 1rem 0;">
        © 2013-2018京ICP备15042860号
      </div>
    </el-footer>
    <!-- <el-backtop></el-backtop> -->
    <add-form ref="addForm"  @fromSubmit = HandFromSubmit></add-form>
  </el-container>
</template>

<script>
import AddForm from './components/add-form.vue'

export default {
  name: 'IndexPage',
  components: {
    AddForm
  },
  data: () => {
    return {
      keywors: '',
      listData: []
    }
  },
  mounted() {
    this.getAPIList()
  },
  methods: {
    /**
     * 或者 API 列表
     */
    getAPIList () {
      this.$axios.get('/api/list', {
        params: {
          keywords: this.keywords
        }
      }).then(({ data: res}) => {
        console.log(res)
        if (res.code === 200) {
          this.listData = res.data
        } else{
          this.$message.error('错了哦，这是一条错误消息');  
        }
      })
    },
    rowClick (row) {
      this.$router.push({ name: 'DocGet', params: { id: row.id }})

    },
    /**
     * 打开新增接口的表单
     */
    addAPI () {
      this.$refs.addForm.show()
    },
    HandFromSubmit (fromData) {
      this.listData.push(fromData)
      console.log(fromData.id);
    }
  }
}
</script>
<style lang="scss">
.app-container {
  position: relative;
}
.header-container
 {
  padding-left: 200px;
  padding-right: 200px;
  background-color: #27ae60;
  color: #fff;
}
.footer-container {
  background-color: #27ae60;
  color: #fff;
  padding: 0;
}

.header-container {
  padding-block: 2rem;

  .site-title {
    font-size: 56px;
    margin: 20px 0 10px;
    text-shadow: -5px 5px 0 rgba(0,0,0,.1);
    font-weight: 500;
    line-height: 1.1;
    font-family: inherit;
  }
  .site-description {
    margin:0 0 15px;
    font-size: 21px;
    font-weight: 200;

    .package-amount {
      font-size: 14px;
    }
  }

  .search-input {
    margin-block: 1.5rem;
    width: 650px;
    .el-input__inner {
      text-align: center;
      height: 50px;
    }
  }
  .menu-list {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2rem;
  }
}

.el-link.el-link--default {
  color: #fff;
  &:hover{
    color: #fff;
  }
}

// 中间主体部分
.main-container {
  padding: 0 200px;
  min-height: 500px;
}

.column-name{
  font-size: 16px;
  font-weight: 700;
}
.desc-header{
  font-size: 15.4px;
  color: #777;
}
.desc-footer{
  font-size: 12px;
  color: #aaa;
}
.el-table .el-table__cell {
  padding: 20px 20px;
}
.footer-top-left{
  padding: 0.5rem 0;
}
.footer-title{
  font-size: 18px;
  padding: 0.5rem 0;
}
</style>
